<template>
  <div>
    <table class="gridtable">
<tr>
    <th>欢迎光临小七仔的水果店</th>
</tr>
<tr>
    <td>苹果10￥/斤,今日可享8折优惠</td>
</tr>
<tr>
    <td>请输入你要购买的斤数<input type="text" v-model.number="buy"></td>
</tr>
<tr>
    <td><button @click="pay">结账</button></td>
</tr>
<tr>
    <td>结账单：总价:{{all}}元,折后{{end}}元,省了{{save}}元</td>
</tr>
</table>
  </div>
</template>
<style type="text/css">table.gridtable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #666666;    border-collapse: collapse;
}table.gridtable th {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #666666;    background-color: #dedede;
}table.gridtable td {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #666666;    background-color: #ffffff;
}
</style>
<script>
export default {
data (){
return {
  buy : '',
  all : '0',
  end : '0',
  save : '0',
}
},
methods : {
pay( ){
 this.all = this.buy*10
 this.end = this.all*0.8
 this.save = this.all-this.end
}
}
}
</script>

<style>

</style>